<template>
	<div class="ele-body">
		<a-card :borderd="false" title="出入柜信息">
			<table cellpadding="0" cellspacing="0" class="recepit_table2">
				<tbody>
					<tr>
						<td class="tit">柜台名称</td>
						<td>{{ info.name || '' }}</td>
						<td class="tit">负责人</td>
						<td>{{ info.charge_user_name || '' }}</td>
						<td class="tit">货品总数</td>
						<td>{{ info.num || 0 }}</td>
					</tr>
				</tbody>
			</table>
			<div class="margin-y-30">
				<a-space>
					<a-input-search placeholder="请输入条形码" enter-button="确定" size="middle" v-model:value="codeVal" @search="onSearch" />
					<a-button class="btn" @click="showLuru = true"><span>批量录入</span></a-button>
					<a-button type="primary" class="ele-btn-icon" @click="toSelect()"><span>选择货品</span></a-button>
				</a-space>

				<a-form
					class="margin-y-15"
					:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
					:wrapper-col="{
						md: { span: 17 },
						sm: { span: 20 },
						xs: { span: 24 }
					}"
				>
					<a-row :gutter="24">
						<a-col :md="10" :sm="10" :xs="10">
							<goodsTable :total="total" :tableData="tableData"  @action="action" @getNext="getDetail" />
						</a-col>
						<a-col :md="14" :sm="14" :xs="14"><detail ref="detailRef" :goodsCode="goodsCode" v-if="goodsCode" /></a-col>
					</a-row>
				</a-form>
			</div>
		</a-card>
		
		<!-- 底部工具栏 -->
		<div class="ele-bottom-tool">
		  <div class="ele-bottom-tool-actions">
		    <a-space size="large">
		      <a-button type="primary" :loading="loading" @click="save()"
		        >保存</a-button
		      >
		      <a-button
		        type="default"
		        class="btn"
		        :loading="loading"
		        @click="finishPageTab()"
		        >取消</a-button
		      >
		    </a-space>
		  </div>
		</div>

		<!-- 选择货品弹窗 -->
		<select-goods v-if="showCheck" v-model:visible="showCheck" :typeCode="query.store_group_code" @load="getDetail" @done="done" />
		<!-- 批量录入条码弹窗 -->
		<luru v-if="showLuru" v-model:visible="showLuru" @luOpt="luOpt" />
	</div>
</template>

<script setup>
import { ref, reactive, unref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message, Modal } from 'ant-design-vue';
import { DownOutlined, UpOutlined, PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { finishPageTab } from '@/utils/page-tab-util';
import { actionFn } from '@/utils/action.js';
import goodsTable from '@/components/jewelry/goodsTable.vue';
import selectGoods from '@/components/jewelry/select-goods.vue';
import luru from '@/components/jewelry/luru.vue';
import detail from './components/detail.vue';
import { uploadUrl } from '@/config/setting';
import { get_detail, wait_goods, add_goods, batch_enter, del_goods, bound } from '@/api/warehouse/goods_bound';

const { currentRoute, push } = useRouter();
const { query } = unref(currentRoute);
console.log(query);
const loading = ref(false);
const showCheck = ref(false);
const goodsCode = ref(null);
const receipts_detail = ref({});
const goods = ref({});
const visible = ref(false);
//货品list
const tableData = ref([]);
const total = ref(0);

const codeVal = ref(null);

const detailRef = ref(null);
const showLuru = ref(false);
const info = ref({});

const onSearch = () => {
	getDetail(1);
};
const action = row => {
	console.log('row', row);
	if (row.action == 'look') {
		lookGoods(row);
	} else if (row.action == 'del') {
		delGoods(row);
	}
};
const lookGoods = row => {
	goodsCode.value = row.code;
	detailRef.value.change(goodsCode.value);
};
const save = () => {
	let goods = [];
	tableData.value.forEach(item=>{
		goods.push({
			code:item.code,
			num:item.num
		});
	})
	bound({ store_group_code: query.store_group_code, goods: goods, type:2 })
		.then(res => {
			message.success(res.msg);
			getDetail();
		})
		.catch(e => {
			message.error(e);
		});
};
const delGoods = row => {
	Modal.confirm({
		title: '提示',
		content: '确认删除？',
		okText: '确认',
		cancelText: '取消',
		onOk: () => {
			del_goods({ store_group_code: query.store_group_code, goods_code: row.code, type:2 })
				.then(res => {
					message.success(res.msg);
					getDetail();
				})
				.catch(e => {
					message.error(e);
				});
		}
	});
};
const luOpt = val => {
	batch_enter({ store_group_code: query.store_group_code, goods: val, type:2 })
		.then(res => {
			message.success(res.msg);
			getDetail();
		})
		.catch(e => {
			message.error(e);
		});
};

//主石信息
const table1 = reactive({
	loading: false,
	column: [],
	tableData: []
});
//副石信息
const table2 = reactive({
	loading: false,
	column: [],
	tableData: []
});

onMounted(() => {
	get_detail({ id: query.code }).then(res => {
		info.value = res;
	});
	getDetail(1);
});
const getDetail = page => {
	wait_goods({
		type: 2,store_group_code: query.store_group_code
	}).then(res => {
		console.log(res)
		total.value = res.length;
		tableData.value = res;
		if(res.length>0){
			goods.value = res[0];
			goodsCode.value= res[0].code;
		}
		/* res.forEach((item, index) => {
			item.sku_info.forEach((m, mindex) => {
				item[m.column] = m.column_type == 'select' || m.column_type == 'selectajax' || m.column_type == 'selectajaxlike' ? m.value_name : m.value;
			});
		});
		goodsCode.value = res.goods.data.length > 0 ? res.goods.data[0].code : '';
		receipts_detail.value = res.receipts_detail; */
	});
};
const toSelect = () => {
	showCheck.value = true;
};

const done = form => {
	let data = {
		url: '/warehouse/group_bound/add_goods'
	};
	form.store_group_code = query.store_group_code;
	form.type = 2;
	delete form.code;
	actionFn(data, form, reloadTable);
};
const reloadTable = () => {
	showCheck.value = false;
	getDetail();
};
/* 更新visible */
const updateVisible = value => {
	visible.value = value;
};
</script>
<style scoped></style>
